<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,main,footer{
            width: 1000px;
            margin: 0 auto;
        }
        /* 设置头部 */
header{
    width: 1000px;
    height: 200px;
    background-color: silver;
    margin: 10px auto;

}
/* 设置主体 */
main{
    width: 1000px;
    height: 400px;
    background-color: #bfa;
    margin: 0 auto;
}
/* 设置左侧导航 */
nav{
    width:200px;
    height: 100%;
    background-color:yellow ;
}
/* 设置中间的内容 */
article{
    width: 600px;
    height: 100%;
    background-color: orange;
    margin: 0 10px;
}
/* 设置右侧内容 */
aside{
    width: 200px;
    height: 100%;
    background-color: pink;
}
/* 设置头底部 */
footer{
    width: 1000px;
    height: 200px;
    background-color: aliceblue;
    margin: 0 auto;
}
    </style>
</head>
<body>
    <!-- 创建头部-->
     <header></header>
     <main>
        <!-- 左侧导航 -->
        <nav></nav>
        <!-- 中间的内容 -->
         <article></article>
         <!-- 右侧导航 -->
          <nav></nav>
    </main>
    
    <footer></footer>
</body>
</html>